<template>
    <div class="header">
        <div class="cont">
            <router-link :to="{ path: '/' }"><img src="../../assets/img/logo.png" alt=""/></router-link>
            <div class="navList">
                <div class="list">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                          内容
                          <img src="../../assets/img/triangle.png" alt=""/>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>
                                    <div @click="$router.push('/dsp/dspJuBen')">短视频</div>
                                </el-dropdown-item>
                                <!--                <el-dropdown-item><router-link :to="{ name: 'lyricsIndex' }">歌词</router-link></el-dropdown-item>-->
                                <!--                <el-dropdown-item>内容 3</el-dropdown-item>-->
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>


                <!--                                <div class="list" @click="to('creation')">创作管理</div>-->

                <!--                <router-link :to="{ path: '/creation' }" class="list">创作管理</router-link>-->

                <!-- <div class="list">
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      版权管理
                      <img src="../../assets/img/triangle.png" alt="" />
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>版权管理 1</el-dropdown-item>
                        <el-dropdown-item>版权管理 2</el-dropdown-item>
                        <el-dropdown-item>版权管理 3</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div> -->

                <!--                <router-link :to="{ name: 'copyright' }" class="list">版权管理</router-link>-->

                <div class="list">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                          版权
                          <img src="../../assets/img/triangle.png" alt=""/>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>
                                    <div @click="to_banquan_chaxun">版权查询</div>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <router-link :to="{ name: 'copyright' }">版权交易</router-link>
                                </el-dropdown-item>
                                <!--                <el-dropdown-item>内容 3</el-dropdown-item>-->
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>


                <!--        <div class="list" @click="to('materialLibrary')">素材库</div>-->
                <!--        <div class="list" @click="to('my')">我的</div>-->
                <!--                <router-link :to="{ path: '/materialLibrary' }" class="list">素材库</router-link>-->
                <!--                <router-link :to="{ path: '/my' }" class="list">我的</router-link>-->
                <router-link :to="{ name: 'industry' }" class="list">行业</router-link>
                <router-link :to="{ path: '/about' }" class="list">关于</router-link>

            </div>
            <div class="btnRight">
                <div class="bindCard" v-if=" (userInfo.status==2) && (userInfo.userCard == null)" @click.stop="bindCard"
                     style="width: 90px;border:1px solid #2EB0C6;margin-right: 20px;cursor: pointer;text-align: center;color: #2EB0C6">
                    绑定账户
                </div>
                <div class="author" @click="userToAuthor" v-if="!creation&&!(userInfo.status==2)"><span>成为作者</span>
                </div>

                <router-link :to="{ name: 'creat' }" class="creation" v-if="creation">
                    <i class="el-icon-plus"></i>
                    创作
                </router-link>

                <div v-if="!(userInfo.username || userInfo.userName)" class="resgin">
                    <span @click="login(false)">注册</span> <span class="bor"></span> <span @click="login(true)">登录</span>
                </div>

                <div v-else>
                    <el-dropdown>
                        <span class="el-dropdown-link">

                            <span class="img">
                                <el-avatar :size="30" :src="userAvatar" fit="fill">
                                    <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                                </el-avatar>
                            </span>
                                {{ userInfo.username || userInfo.userName }}
                        </span>

                        <template #dropdown>
                            <el-dropdown-menu>

                                <el-dropdown-item @click="$router.push('/my')">
                                    我的
                                </el-dropdown-item>

                                <el-dropdown-item @click="$router.push('/personalCenter')">
                                    <!--                  <router-link :to="{ name: 'personalCenter' }">个人中心</router-link>-->
                                    个人中心
                                </el-dropdown-item>

                                <el-dropdown-item @click="$router.push('/creation')">
                                    创作管理
                                </el-dropdown-item>

                                <el-dropdown-item @click="logout">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>

                    </el-dropdown>
                </div>
            </div>
        </div>
        <Login ref="login" :islogin="islogin"></Login>
        <Author ref="author"></Author>
        <Bindcard ref="bindCard"></Bindcard>
    </div>
</template>
<script>
    import Login from "./login.vue";
    import Author from "./author.vue";
    import Bindcard from "./bindCard.vue";
    import {Logout} from "@/api/UserInfo"
    import {getUserInfo, removeUserInfo} from "@/utils/auth";
    import baseConfig from "@/utils/config"
    import {ElMessage} from 'element-plus'

    export default {
        components: {
            Login,
            Author,
            Bindcard,
        },
        data() {
            return {
                creation: false,
                islogin: true,
            };
        },
        watch: {
            userInfo: {
                handler(nv) {
                    debugger
                },
                deep: true
            }
        },
        computed: {
            userAvatar() {
                return baseConfig.dev + this.$store.state.userInfo.userAvatar
            },
            userInfo() {
                return this.$store.state.userInfo
            }
        },
        created() {
            // this.$store.state.userInfo
            // debugger
            // if (getUserInfo()) {
            //   this.userInfo = JSON.parse(getUserInfo());
            // }
        },
        watch: {
            $route(to, form) {
                if (to.name == 'creation' || to.name == 'creat') {
                    this.creation = true
                } else {
                    this.creation = false
                }
            },
        },
        methods: {
            to(name) {
                if (!this.userInfo.userName) {
                    this.login()
                    return false
                }
                if (name == 'creation' && this.userInfo.status != 2) {
                    this.userToAuthor()
                    return false
                }
                this.$router.push({name: name})
            },
            login(login_or_register) {
                this.islogin = login_or_register;
                this.$refs.login.dialogVisible = true;
                this.$refs.login.FindpassWord = false;
                this.$refs.login.FindpassWordCheck = true;
            },
            logout() {
                this.userInfo = {};
                Logout().then((res) => {
                })
                removeUserInfo();
                this.$store.commit('setUser', {})
                this.$router.push({path: "/"});
            },
            userToAuthor() {

                if (getUserInfo()) {
                    this.$refs.author.dialogVisible = true;
                } else {
                    ElMessage({
                        message: '请先登录',
                        type: 'warning',
                    })
                }


            },
            to_banquan_chaxun() {
                window.open('http://106.14.18.148:4000/', '_blank');
            },
            bindCard() {
                this.$refs.bindCard.dialogVisible = true
                console.log(this.$refs.bindCard.dialogVisible)
                console.log("aaaaaaaaa")
            },
        },
    };
</script>
<style lang="scss" scoped>
    .header {
        height: 50px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 999;

        .cont {
            width: 1002px;
            display: flex;
            align-items: center;

            .navList {
                margin-left: 20px;
                flex: 1;
                height: 50px;
                display: flex;
                align-items: center;

                .list {
                    height: 50px;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    color: #999;
                    padding: 0 14px;
                    position: relative;
                    cursor: pointer;

                    ::v-deep {
                        .el-dropdown-link {
                            height: 50px;
                            display: flex;
                            align-items: center;
                            font-size: 14px;
                            color: #999;

                            img {
                                margin-left: 4px;
                            }
                        }
                    }
                }

                a {
                    text-decoration: none;
                    color: #999;
                    display: block;
                    box-sizing: border-box;

                    &.router-link-active {
                        background: #fff;
                        color: #2eb0c6;
                        border: 1px solid #eeeeee;
                        position: relative;
                        box-sizing: border-box;

                        &::before {
                            width: 100%;
                            display: block;
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            height: 4px;
                            background: #2eb0c6;
                        }
                    }
                }
            }

            .btnRight {
                display: flex;
                font-size: 14px;

                & > div {
                    width: 88px;
                    height: 28px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 14px;
                    box-sizing: border-box;

                    .el-dropdown-link {
                        display: flex;
                        align-items: center;

                        .img {
                            padding-right: 10px;
                        }
                    }

                    span {
                        cursor: pointer;
                    }

                    &.author {
                        border: 1px solid #2eb0c6;
                        color: #2eb0c6;
                        margin-right: 20px;
                    }

                    &.resgin {
                        background: #2eb0c6;
                        color: #fff;

                        span.bor {
                            width: 1px;
                            background: #fff;
                            height: 12px;
                            display: block;
                            margin: 0 4px;
                        }
                    }
                }

                .creation {
                    border: 1px solid #2eb0c6;
                    border-radius: 13px;
                    width: 61px;
                    height: 27px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #2eb0c6;
                    font-size: 12px;
                    cursor: pointer;

                    i {
                        margin-right: 5px;
                    }
                }
            }
        }
    }
</style>
